<template>
  <div>
    <el-form :model="addForm">
      <c-template>
        <c-form-template>
          <el-col :span="24" class="flex-y-center">
            <div class="head-img">
              <img v-if="avatarImg" :src="avatarImg" />
              <img v-else src="@/assets/img/head.png" />
            </div>
            <div class="ml-lg">
              <el-button @click="upload" type="primary">更改照片</el-button>
              <div class="mt-lg">添加照片,个性化你的账号</div>
            </div>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用户名">
              <el-input placeholder="请输入用户名" v-model="addForm.username" />
            </el-form-item>
          </el-col>
        </c-form-template>
      </c-template>

      <c-template class="mt-lg">
        <c-form-template lable="信息资料">
          <el-col :span="8">
            <el-form-item label="真实姓名">
              <el-input
                placeholder="请输入真实姓名"
                v-model="addForm.realName"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input
                placeholder="请输入邮箱"
                v-model="addForm.email"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="单位">
              <el-input
                placeholder="请输入单位"
                v-model="addForm.company"
              />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="部门">
              <el-input
                placeholder="请输入部门"
                v-model="addForm.department"
              />
            </el-form-item>
          </el-col>
        </c-form-template>

        <el-button @click="save()" type="primary" icon="el-icon-edit-outline">保存</el-button>
      </c-template>
      <!-- <section class="pro-top">
        <div class="head-info dsf">
          <img v-if="avatarImg" class="head-img radius50" :src="avatarImg" alt="">
          <img v-else class="head-img radius50" src="@/assets/img/head.png" alt="">
          <div class="ml25 color101 pt10">
            <div v-if="!isEdit" class="ft14 cpointer" @click="toggleEdit()">
              {{$t('profile.userName')}} :
              {{addForm.username}}
            </div>
            <el-input v-else v-model="addForm.username" :placeholder="$t('profile.required')"></el-input>
            <div class="mt-md ft18 fwbold">{{$t('profile.addPic')}}</div>
            <el-button class="mt10" @click="upload" type="primary">{{$t('profile.changePic')}}</el-button>
          </div>
        </div>
      </section> -->
      <!-- <section class="pro-bottom ft14">
        <h3 class="pro-title">{{ $t("profile.info") }}</h3>
        <el-row :gutter="20" class="bd-top ofh">
          <el-col :span="3">{{ $t("management.realName") }}</el-col>
          <el-col :span="6">
            <span
              class="cpointer edit-span"
              v-if="!isEdit"
              @click="toggleEdit()"
              >{{ addForm.realName }}</span
            >
            <el-input v-else v-model="addForm.realName"></el-input>
          </el-col>
          <el-col :span="3" class="text-right">{{
            $t("profile.emailAddress")
          }}</el-col>
          <el-col :span="6">
            <span
              class="cpointer edit-span"
              v-if="!isEdit"
              @click="toggleEdit()"
              >{{ addForm.email }}</span
            >
            <el-input v-else v-model="addForm.email"></el-input>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="bd-top bd-bottom ofh">
          <el-col :span="3">{{ $t("profile.institution") }}</el-col>
          <el-col :span="6">
            <span
              class="cpointer edit-span"
              v-if="!isEdit"
              @click="toggleEdit()"
              >{{ addForm.company }}</span
            >
            <el-input v-else v-model="addForm.company"></el-input>
          </el-col>
          <el-col :span="3" class="text-right">{{
            $t("profile.department")
          }}</el-col>
          <el-col :span="6">
            <span
              class="cpointer edit-span"
              v-if="!isEdit"
              @click="toggleEdit()"
              >{{ addForm.department }}</span
            >
            <el-input v-else v-model="addForm.department"></el-input>
          </el-col>
        </el-row>

        <div class="pro-line text-right">
          <span class="color2d8 ft15 cpointer" @click="save()"
            ><i class="icon-al-baocun mr10"></i>{{ $t("global.save") }}</span
          >
        </div>
      </section> -->
    </el-form>
  </div>
</template>
<script>
import { uploadFile } from "@/utils/uploadFile";
import cTemplate from "@/components/template/c-template.vue";
export default {
  components: { cTemplate },
  data() {
    return {
      addFormProps: {
        company: "",
        department: "",
        email: "",
        realName: "",
        username: "",
      },
      addForm: {},
      avatarImg: "",
      isUpload: false,
      isEdit: false,
    };
  },
  created() {
    this.getInfo();
  },

  methods: {
    getInfo() {
      this.$post({
        url: "/user/info",
      }).then((res) => {
        for (let i in this.addFormProps) {
          this.$set(this.addForm, i, res[i]);
        }
        this.avatarImg = res.avatar;
        sessionStorage.setItem("user", JSON.stringify(res));
        localStorage.setItem("user", JSON.stringify(res));
        this.$store.commit("SET_USER", res);
      });
    },
    toggleEdit() {
      this.isEdit = true;
    },
    picToBase64(file, fn) {
      let reader = new FileReader();
      reader.addEventListener("load", (e) => {
        fn(e);
      });
      reader.readAsDataURL(file);
    },
    upload() {
      uploadFile({ accept: ".jpg,.png" }).then((file) => {
        if (!/(\.jpg|\.png)$/.test(file.name.toLowerCase())) {
          this.$message({
            type: "warning",
            message: this.$t("profile.photoFormat"),
          });
          return false;
        }
        let formData = new FormData();
        formData.append("uploadFile", file);
        this.$post({
          url: "/upload",
          data: formData,
        }).then((res) => {
          this.picToBase64(file, (e) => {
            this.avatarImg = e.target.result;
          });
          this.$set(this.addForm, "avatar", res.url);
          this.isUpload = true;
        });
      });
    },
    save() {
      // 如果没有上传图，也没有修改 则不调用保存接口
      // if (!this.isUpload && this.isEdit == false) {
      //   this.$message({
      //     message: this.$t("profile.noChange"),
      //     type: "warning",
      //   });
      //   return;
      // }   数字+英文  请输入数字加英文用于账号登录

      if (this.addForm.username === "") {
        this.$message({
          message: this.$t("profile.missingUserName"),
          type: "warning",
        });
        return;
      }
      let data = Object.assign({}, this.addFormProps, this.addForm);
      //如果没有上传新的图片，就不传avatar字段
      if (!this.isUpload) {
        delete data.avatar;
      }
      this.$post({
        url: "/user/info/modify",
        data,
      }).then((res) => {
        this.isEdit = false;
        this.getInfo();
        this.$message({
          message: this.$t("profile.operateSuccessfully"),
          type: "success",
        });
      });
    },
  },
};
</script>
<style scoped lang="scss">
.head-img {
  width: 120px;
  height: 120px;
  & > img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
}

.bd-top {
  border-top: 1px solid #d9d9d9;
}

.bd-bottom {
  border-bottom: 1px solid #d9d9d9;
}

.pro-top {
  padding: 40px 0 40px 0;
  background-color: #fff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
}

.pro-bottom {
  padding: 0 30px;
  background-color: #fff;
  // box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  color: rgba(0, 0, 0, 0.7);
}

.pro-line,
.el-row,
.pro-title {
  height: 55px;
  line-height: 55px;
}
.edit-span {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
}

.icon-al-baocun {
  font-size: 13px;
}
</style>
